import { FC, useEffect, useRef, useState } from "react";
import "./AmapCom.css";

import AMapLoader from "@amap/amap-jsapi-loader";
interface ILuzhouPoints {
  lnglat: string[];
  district: string;
  building: string;
  city:string;
  customData?: any;
}

const luzhouPoints:ILuzhouPoints[] = [
  {
    lnglat: ["105.4419", "28.8898"],
    building: "泸州老窖旅游区",
    district: "江阳区",
    city: "泸州"
  },
  {
    lnglat: ["105.4321", "28.8765"],
    building: "报恩塔",
    district: "江阳区",
    city: "泸州"
  },
  {
    lnglat: ["105.4567", "28.9012"],
    building: "泸州市人民医院",
    district: "江阳区",
    city: "泸州"
  },
  {
    lnglat: ["105.4023", "28.7654"],
    building: "张坝桂圆林",
    district: "龙马潭区",
    city: "泸州"
  },
  {
    lnglat: ["105.3876", "28.7123"],
    building: "泸州客运中心站",
    district: "龙马潭区",
    city: "泸州"
  },
  {
    lnglat: ["105.4234", "28.8234"],
    building: "西南医科大学",
    district: "龙马潭区",
    city: "泸州"
  },
  {
    lnglat: ["105.3567", "28.6789"],
    building: "泸州云龙机场",
    district: "龙马潭区",
    city: "泸州"
  },
  {
    lnglat: ["105.8345", "28.9123"],
    building: "太平古镇",
    district: "古蔺县",
    city: "泸州"
  },
  {
    lnglat: ["105.8123", "28.8456"],
    building: "二郎滩",
    district: "古蔺县",
    city: "泸州"
  },
  {
    lnglat: ["105.3765", "28.9876"],
    building: "方山风景区",
    district: "纳溪区",
    city: "泸州"
  },
  {
    lnglat: ["105.3456", "28.9456"],
    building: "天仙硐",
    district: "纳溪区",
    city: "泸州"
  },
  {
    lnglat: ["105.6543", "28.7654"],
    building: "福宝古镇",
    district: "合江县",
    city: "泸州"
  },
  {
    lnglat: ["105.7123", "28.8123"],
    building: "尧坝古镇",
    district: "合江县",
    city: "泸州"
  },
  {
    lnglat: ["105.2345", "28.4567"],
    building: "玉蟾山",
    district: "泸县",
    city: "泸州"
  },
  {
    lnglat: ["105.3456", "28.5123"],
    building: "龙脑桥",
    district: "泸县",
    city: "泸州"
  },
  {
    lnglat: ["105.4567", "28.5678"],
    building: "泸县二中",
    district: "泸县",
    city: "泸州"
  },
  {
    lnglat: ["105.5678", "28.3456"],
    building: "叙永丹山",
    district: "叙永县",
    city: "泸州"
  },
  {
    lnglat: ["105.6789", "28.4123"],
    building: "春秋祠",
    district: "叙永县",
    city: "泸州"
  },
  {
    lnglat: ["105.7890", "28.4789"],
    building: "画稿溪",
    district: "叙永县",
    city: "泸州"
  },
  {
    lnglat: ["105.1234", "28.2345"],
    building: "泸州港",
    district: "江阳区",
    city: "泸州"
  }
];

const clusterIndexSet = {
  city: {
    minZoom: 2,
    maxZoom: 12,
  },district: {
    minZoom: 12,
    maxZoom: 16,
  },
  building: {
    minZoom: 16,
    maxZoom: 22,
  },
  
};
const Amap: FC = () => {
  const AmapRef = useRef<AMap.Map | null>(null);
  const [mapZoom,setMapZoom]=useState<number>(9)
  useEffect(() => {
    initMap();
  }, []);

  const initMap = async (): Promise<void> => {
    window._AMapSecurityConfig = {
      securityJsCode: "45c8f1789b3f030f03c3bdd05e9f6bb0",
    };
    const AMap = await AMapLoader.load({
      key: "630febc1199e55c6c09660c2f02c6091", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.IndexCluster",'AMap.ToolBar'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    });
    AmapRef.current = new AMap.Map("container-map", {
      //设置地图容器id
      // viewMode: "3D", //是否为3D地图模式
      zoom: mapZoom, //初始化地图级别
      center: [105.441866, 28.87098], //初始化地图中心点位置
    });
    if (AmapRef.current) {
      const map=AmapRef.current;
      new AMap.IndexCluster(
        map,
        luzhouPoints,
        {
          renderClusterMarker: _renderClusterMarker, //自定义聚合点样式
          clusterIndexSet: clusterIndexSet, //聚合规则
        }
      );
      map.addControl(new AMap.ToolBar());
      map.on('zoomend', () => {
          const zoom = map.getZoom();
         console.log('触发地图缩放结束时的事件',zoom);
         setMapZoom(zoom)
      });
    }
  };

  //聚合点样式
const _renderClusterMarker = function (context:any) {
  console.log(context)
    // var clusterData = context.clusterData; // 聚合中包含数据
    //     var index = context.index; // 聚合的条件
    //     var count = context.count; // 聚合中点的总数
    //     var marker = context.marker; // 聚合点标记对象
    //     var styleObj = getStyle(context);
    //     // 自定义点标记样式
    //     var div = document.createElement('div');
    //     div.className = 'amap-cluster';
    //     div.style.backgroundColor = styleObj.bgColor;
    //     div.style.width = styleObj.size + 'px';
    //     if(styleObj.index <= 2) {
    //         div.style.height = styleObj.size + 'px';
    //     }
    //     div.style.border = 'solid 1px ' + styleObj.borderColor;
    //     div.style.borderRadius = styleObj.size + 'px';
    //     div.innerHTML = styleObj.text;
    //     div.style.color = styleObj.color;
    //     div.style.textAlign = styleObj.textAlign;
    //     div.style.boxShadow = styleObj.boxShadow;
    //     context.marker.setContent(div)
    //     // 自定义聚合点标记显示位置
    //     var position = getPosition(context);
    //     if(position){
    //         context.marker.setPosition(position);
    //     }
    //     context.marker.setAnchor('center');
};
  return (
    <>
      <h1>测试  地图缩放程度{mapZoom}</h1>
      <div className="amap" id="container-map"></div>
    </>
  );
};

function getStyle(context:any) {
        var clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合绘制点 Marker 对象
        var color = [
            '8,60,156',
			'66,130,198',
            '107,174,214',
            '78,200,211',
        ];
        var indexs = ['city','district','area','community'];
        var i = indexs.indexOf(index['mainKey']);
        var text = clusterData[0][index['mainKey']];
        var size = Math.round(30 + Math.pow(count / 20, 1 / 5) * 70);
        if(i <= 2){
            var extra = '<span class="showCount">'+ context.count +'套</span>';
            text = '<span class="showName">'+ text +'</span>';
            text += extra;
        } else {
            size = 12 * text.length + 20;
        }
        var style = {
            bgColor: 'rgba(' + color[i] + ',.8)',
            borderColor: 'rgba(' + color[i] + ',1)',
            text: text,
            size: size,
            index: i,
            color: '#ffffff',
            textAlign: 'center',
            boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
        }
        return style;
    }

    //   function getPosition(context:any) {
    //     var key = context.index.mainKey;
    //     var dataItem = context.clusterData && context.clusterData[0];
    //     var districtName = dataItem[key];
    //     if(!district[districtName]) {
    //         return null;
    //     }
    //     var center = district[districtName].center.split(',');
    //     var centerLnglat = new AMap.LngLat(center[0], center[1]);
    //     return centerLnglat;
    // }
export default Amap;
